<template>
  <div class="Home">
    <lover-header></lover-header>
    <van-tabs v-model="active">
      <van-tab :title="item.name" v-for="item in list" :key="item.id">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
          >
            <mylove :info="info"></mylove>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      list: [],
      info: [],
      pageIndex: 0,
      finished: false,
      loading: false,
      isLoading: false,
    };
  },
  watch: {
    active(newVal) {
      console.log(newVal);
      this.info = [];
      this.pageIndex = 0;
      this.loading = true;
      this.getinfo(newVal);
    },
  },
  created() {
    this.getListTap();
  },
  methods: {
    async getListTap() {
      const res = await this.$axios.get("/category");
      this.list = res.data.data;
      this.getinfo(this.list[this.active].id);
      console.log(this.list);
    },
    async getinfo(id) {
      this.pageIndex++;
      const res = await this.$axios.get("/post", {
        params: {
          pageSize: 5,
          pageIndex: this.pageIndex,
          category: id,
        },
      });
      console.log(res);
      if (res.data.data.length < 5) {
        this.finished = true;
      }
      this.info = [...this.info, ...res.data.data];
      this.loading = false;
      this.isLoading = false;
    },
    onLoad() {
      console.log("翠堤了");
      this.getinfo(this.list[this.active].id);
    },
    onRefresh() {
      console.log("我拉区了");
      this.info = [];
      this.pageIndex = 0;
      this.getinfo(this.list[this.active].id);
    },
  },
};
</script>

<style scoped lang='less'>
/deep/ .van-tabs__nav {
  background-color: rgba(99, 99, 99, 0.6);
}
</style>